<template>
  <el-dialog
    title="脚本编辑"
    :visible.sync="dialogShow"
    width="1000px">
    <!-- <div class="options_box">
     <el-button type="primary" @click="runJavaScript()" size="small">运行</el-button>
    </div> -->
    <!-- <codemirror class="codemirror" v-model="code" :options="cmOption" /> -->
    <CodemirrorExample ref="codemirrorExample" v-model="code"  :cmMode="'javascript'"></CodemirrorExample>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogShow = false">取 消</el-button>
      <el-button type="primary" @click="saveStyle">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import dedent from 'dedent'
  import CodemirrorExample from '../codemirror-example/index.vue'


  // import { codemirror } from 'vue-codemirror'
  // import 'codemirror/lib/codemirror.css'
  // // language
  // import 'codemirror/mode/css/css.js'

  // // theme css
  // import 'codemirror/theme/paraiso-light.css'

  // // require active-line.js
  // import'codemirror/addon/selection/active-line.js'
  
  export default {
    name: 'codemirror-example-js',
    components: {
      // codemirror,
      CodemirrorExample
    },
    data() {
      return {
        uuid: null,
        dialogShow: false,
        code: dedent``
      }
    },
  created() {
    this.uuid = require('uuid').v1();
  },
    methods: {
      show(javaScriptInfo) {
        if (javaScriptInfo) {
          this.code = javaScriptInfo;
        } else {
          this.code = this.code ?  this.code : '';
        }
        this.$nextTick(() => {
            this.$refs.codemirrorExample.setValue(this.code);
        })
        // 
        this.dialogShow = true;
      },
      runJavaScript(javaScriptInfo) {
        this.code = javaScriptInfo || this.code;
    
        // Function('"use strict";return ' + this.code )();
        let fun = new Function('return ' + this.code);
        fun.bind(this)();
      },
      saveStyle() {
        // this.code = this.$refs.codemirrorExample.getValue();
        // this.runJavaScript();
        this.$emit('savaJavaScript', this.code);
        this.hide();
      },
      hide() {
        this.dialogShow = false;
        this.code = ''
      }
    }
  }
</script>
<style scoped>
.options_box{
  margin-bottom: 10px;
}
/deep/ .el-dialog__body{
  padding: 10px;
}
</style>